<template>
	<view class="content">
		<view class="imgs">
			<u-upload action='' :file-list="fileList"  upload-text='上传闲置图片' del-bg-color='#d5c8c8' del-color='#fff'   max-count='6' :auto-upload="false" @on-remove='removeImg' @on-choose-complete="dealImg()"></u-upload>
		</view>
			
			<view class="goodDetailInput">
				<view class="title">标题</view>
					<view class="input2">
						<u-input  v-model="goodsData.name" maxlength=20 placeholder="请输入宝贝的名称" border="bottom" clearable placeholderStyle="color: #c5c5c5 "></u-input>
						
					</view>
					
			</view>
			
			<view class="goodDetailInput" style="border-bottom: none;">
				<view class="title" style="line-height: 100rpx;">分类</view>
				<picker @change="bindPickerChangeSort" :value="sortIndex" :range="sortArray">
				    <view class="pickerStyle">
				     {{sortArray[sortIndex]}}
				    </view>
				</picker>
			</view>
			<view class="goodDetailInput" style="border-bottom: none;">
				<view class="title" style="line-height: 100rpx;">校区</view>
				<u-radio-group v-model="locationValue" width ='50%' @change="radioGroupChange">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in LocationList" :key="index" 
								:name="item.name"
								:disabled="item.disabled"
							>
								{{item.name}}
							</u-radio>
				</u-radio-group>
				
			</view>
			<view class="goodDetailInput" style="border-bottom: none;">
				<view class="title" style="line-height: 100rpx;">区域</view>
				
				<picker @change="detailLocationChange" :value="detailLocationIndex" :range="detailLocationArray">
				    <view class="pickerStyle">
				     {{detailLocationArray[detailLocationIndex]}}
				    </view>
				</picker>
				
				
			</view>
			<view class="goodDetailInput">
				<view class="title">想卖</view>
					<view class="input3">
						<u-input type="number"  v-model="goodsData.price" maxlength=20 placeholder="想卖多少钱" border="bottom" clearable placeholderStyle="color: #c5c5c5 "></u-input>
					</view>
					<view class="iconCss">
						￥
					</view>
			</view>
			
			<view class="goodDetailInput">
				<view class="title">联系方式</view>
					<view class="input2">
						<u-input  v-model="goodsData.wxNumber" placeholder="微信号/手机号" placeholderStyle="color: #c5c5c5 " border="bottom" clearable ></u-input>
					</view>
			</view>
			<!-- 商品描述 -->
			<view class="goods_describe">
				<view class="title">宝贝描述</view>
				<textarea v-model="goodsData.detail" maxlength=150 @focus="" @blur=""
					:placeholder="goods_describe" placeholder-class="placeholderStyle">
				</textarea>
			</view>
			
			<!-- <button class="inputbtn" color = '#5db4f4'  type="" @click="goodPublic">发布</button> -->
			<u-button type="primary" class="inputbtn"   @click="goodPublic">确认修改</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailLocationArray:[],
				detailLocationIndex:0,
				sortArray:['生活用品','体育器材','学习用品','其它'],
				sortIndex:0,
				locationValue: '',
				LocationList: [
					{
						name: '海珠',
						disabled: false
					},
					{
						name: '白云',
						disabled: false
					}
				],
				header:'',
				fileList: [],
				value1:[0],
				goodsData: {
					classifyId: '',
					detail: '', 
					detailLocation:'',
					location:'',
					name: '', 
					price: '', 
					urls: [], 
					wxNumber:""
				},
				location:'',
				sort:'',
				goodsData1:{
					classifyId: '',
					detail: '', 
					detailLocation:'',
					location:'',
					name: '', 
					price: '', 
					urls: [], 
					wxNumber:""
				},
				goods_describe: "描述你的宝贝，如规格、购买渠道、转手原因等，以及联系方式",
				indicatorStyle: `height: 30px`,
				category1:['生活用品','体育器材','学习用品','其它'],
				value:[0],
				goodId:'',
			};
		},
		async onLoad(res){
			console.log('商品详情里面的onloadId',res.goodId)
			this.getGoodDetail(res.goodId)
			this.goodId = res.goodId;
			let header = new Object()
			 header.Authority= getApp().globalData.header.Authority
			 this.header = header
			 wx.cloud.init({
				 env:"course-service-0gf7qv1h7d7d6aae"
			 })
			 
		},
		methods:{
			detailLocationChange(e){
				console.log('详细地址改变了detailLocationChange',e)
				this.detailLocationIndex = e.detail.value;
				this.goodsData.detailLocation = this.detailLocationArray[e.detail.value];
				// this.goodsData.detailLocation = 
				
			},
			bindPickerChangeSort(e){
				console.log('分类选择改变了',e.detail.value)
				this.sortIndex= e.detail.value;
				this.goodsData.classifyId = e.detail.value*1+1
			},
			radioGroupChange(e) {
				console.log('radioGroupChange',e);
			},
			async radioChange(e) {
				console.log('radioChange',e);
				if(e=='白云'){
					this.goodsData.location=1
				}else if(e=='海珠'){
					this.goodsData.location=0
				}
				let getDetailLocation = await getApp().UniRequest("/twohandbook/goods/detailLocation?location="+ this.goodsData.location,"GET",'','');
				console.log('获取详细地址getDetailLocation',getDetailLocation)
				if(getDetailLocation.code==20000){
					 this.detailLocationArray=[]
					 getDetailLocation.data.list.forEach((item,index)=>{
						 this.detailLocationArray.push(item.name)
					 })
				}
				
			},
			async getGoodDetail(goodId){
				uni.showLoading({
					title: '加载中'
				})
				let header = new Object
				header.Authority = getApp().globalData.header.Authority
				let res = await getApp().UniRequest("/twohandbook/goods/byId?id="+goodId,"GET","",header)
				console.log('获取商品详情信息',res)
				if(res.code==20000){
					let goodRes =res.data.detail;
					let length = goodRes.urls.length
					for(let i=0;i<length;i++){
						this.fileList.push({url:goodRes.urls[i]})
						this.goodsData.urls.push(goodRes.urls[i])
						this.goodsData1.urls.push(goodRes.urls[i])
					}
					this.goodsData.name = goodRes.name
					this.goodsData1.name = goodRes.name
					this.sort = this.category1[goodRes.classifyId-1]
					// this.value1= [goodRes.classifyId-1];
					if(goodRes.location==0){
						this.location = '海珠校区'
						this.locationValue = '海珠'
					}else if(goodRes.location==1){
						this.location = '白云校区'
						this.locationValue = '白云'
					}else{
						this.location = ' '
					}
					this.value = [goodRes.location]
					this.goodsData.location =goodRes.location
					this.goodsData1.location =goodRes.location
					this.goodsData.classifyId = goodRes.classifyId
					this.goodsData1.classifyId = goodRes.classifyId
					this.goodsData.price = goodRes.price
					this.goodsData1.price = goodRes.price
					this.goodsData.detail = goodRes.detail
					this.goodsData1.detail = goodRes.detail
					this.goodsData.wxNumber = res.data.wxNumber
					this.goodsData1.wxNumber = res.data.wxNumber
					uni.hideLoading()
				}
			},
			dealImg(lists) {
					console.log('lists',lists)
					// 上传图片
					this.goodsData.urls=[]
					let length = lists.length
					for (let i = 0; i < length; i++) {
						console.log('图片路径：：：',i,lists[i])
						let urlCloudName = lists[i].url.split('/')[3];
						console.log('处理后的urlCloudName',urlCloudName);
					wx.cloud.uploadFile({
						  cloudPath: urlCloudName, 
						  filePath: lists[i].url,
						  config: {
						    env: 'course-service-0gf7qv1h7d7d6aae' // 微信云托管环境ID
						  },
						    success: async res => {
						      console.log('成功之后的resID',res.fileID)
							  this.goodsData.urls.push(res.fileID)
						    },
						    fail: err => {
							  console.log('上传失败')
							  this.goodsData.urls.push(lists[i].url)
						    }
						})
						
					}
					console.log('商品图片',this.goodsData.urls)
					
				},
			
			// 删除图片
			removeImg(index,list) {
				console.log('图片被删除了',index,list)
				// this.tempImgListL.splice(index, 1)
				this.goodsData.urls.splice(index,1)
				console.log('this.goodsData.urls',this.goodsData.urls)
			},
			bindChange(e) {
				let value = e.detail.value; //获取当前选中项的下标
				this.goodsData.classifyId = value[0]+1;
				console.log("触发了bindChange")
				console.log(value[0])
			},
			locationChange(e){
				let value = e.detail.value; //获取当前选中项的下标
				console.log('校区改变了',value)
				this.goodsData.location=value[0]
			},
			
			async goodPublic(){
				let vm = this
				console.log('goodPublic11111111')
				
				
				
				if(this.goodsData.classifyId==''){
					this.goodsData.classifyId=this.value1[0]+1;
					
				}
				console.log('this.goodsData.classifyId',this.goodsData.classifyId)
				// this.goodsData.urls = ['http://1.14.247.152:9797/images/11435javatext.jpg']
				
				
				console.log('编辑前的商品图片',this.goodsData.urls);
				if(this.goodsData.urls.length==0){
					uni.showToast({
						 title: '请附上商品图片',
						 icon: 'error',
						 duration: 600
					});
					return
				}
				console.log('this.goodsData.price',this.goodsData.price)
			
				if(this.goodsData.name==''){
					uni.showToast({
						 title: '请填写宝贝名称',
						 icon: 'error',
						 duration: 600
					});
					return
				}
				
				if(this.goodsData.price==''){
					uni.showToast({
						 title: '请填写价格',
						 icon: 'error',
						 duration: 600
					});
					return
				}
				let reg = /[^\d]/;
				if(reg.test(this.goodsData.price)==true){
					
					uni.showToast({
						 title: '请填写正确价格',
						 icon: 'error',
						 duration: 600
					});
					return
				}
				
				 // getApp().globalData.wxNumber=this.goodsData.wxNumber 
				 // 测试，记得把它删了
				// this.goodsData1.location=this.goodsData.location
					//
				if(JSON.stringify(this.goodsData)==JSON.stringify(this.goodsData1)){
					uni.showToast({
						title: '请先编辑内容',
						icon: 'error',
						duration: 400
					})
					return
				}
				 let body = this.goodsData
				 body.goodsId = this.goodId;
				uni.showLoading({
					title: '修改中'
				})
				// console.log('发布前this.goodsData',this.goodsData)
				let res = await getApp().UniRequest("/twohandbook/goods/authority/edit","POST",body,this.header);
				console.log('编辑闲置物品发布res：',res)
				if(res.code === 20000){
					setTimeout(()=>{
						uni.hideLoading()
						uni.showToast({
							title:'修改成功',
							duration:1700
						});
					},400)
					setTimeout(()=>{
						this.back()
					},800)
					
				}else{
					uni.hideLoading()
					uni.showToast({
						 title: '修改失败',
						 icon: 'error',
						 duration: 400
					});
				}
				
			},
			back(){
				let pages = getCurrentPages(); //获取所有页面栈实例列表
			console.log('当前页面',pages);
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				uni.navigateBack({
					delta: 1
				})
			
			},
		}
	}
</script>

<style lang="scss">
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	/deep/.u-input--border.data-v-460c1d26 {
			border-radius: 6rpx;
			border: none;
			border-bottom: 1px solid #dcdfe6 !important;
	}
	.imgs{
		margin: 0 auto;
		width: 90%;
		/deep/.u-upload.data-v-0d33af60 {
		    padding-left: 10rpx !important;
			justify-content: center;
		}
	}
	
	.goodDetailInput{
			width: 90%;
			margin: 0 auto;
			display: flex;
			padding: 21rpx 0;
			/* text-align: right; */
			position: relative;
			justify-content: space-around;
			.title{
				color:#2979ff;
				font-weight: 600;
				text-align: center;
				display: flex;
				flex: 2;
				justify-content: space-around;
				font-size: 35rpx;
				align-items: center;
				
			}
			u-radio-group{
				flex: 6;
				display: flex;
				/* justify-content: space-between; */
				align-items: center;
			}
			picker{
				flex: 6;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #dcdfe6 !important;
				.pickerStyle{
					    margin-left: 20rpx;
				}
			}
			.input2{
				flex: 6;
				height: 83rpx;
				
				
			}
			.input3{
				flex: 6;
				height: 83rpx;
				/deep/.u-input--border.data-v-460c1d26 {
						padding: 0 22px !important;
				}
			}
			.iconCss{
				position: absolute;
				color: #f75959;
				left: 173rpx;
				top: 32rpx;
				font-size: 33rpx;
				font-weight: 600;
			}
			
			picker-view{
				height: 100rpx;
			    flex: 6;
			}
			 
			// 修改原有的上下边框颜色
			::v-deep .selectLine::after {
			    border-bottom: 2rpx solid #ccc;
			}
			::v-deep .selectLine::before {
			    border-top: 2rpx solid #fff; 
			}
			.item{
				text-align: left;
				padding: 3rpx 19rpx;
			}
		}
		.goods_describe{
			font-size: 31rpx;
			width: 90%;
			margin-top: 20rpx;
			display: flex;
			.title{
				flex: 0.9;
			    color: #2979ff;
				font-weight: 600;
			    padding-left: 17.1rpx;
				font-size: 35rpx;
			
			}
			textarea{
				width: 485rpx;
				height: 91rpx;
				border-bottom: 1rpx solid #ccc;
			}
		}
		.inputbtn {
				margin: 152rpx 30rpx 30rpx 30rpx;
			    // background-color: transparent;
			    // color: #fd4f02;
				position: fixed;
				bottom: 96rpx;
			    font-size: 34rpx;
				width: 60%;
				/deep/.u-btn--primary.data-v-6e15e680 {
					color: #ffffff;
					border-color: #508cf1;
					background-color: #2979ff;
					border-radius: 41rpx;
					font-weight: 600;
					letter-spacing: 10rpx;
					font-size: 34rpx;
}
		}
		
}
.u-input--border.data-v-460c1d26 {
		    border-bottom: 1px solid #dcdfe6;
		}
</style>
